<template>
<div>
            
            <div class="subHeader">
            <el-input class="right" placeholder="请输入项目名称" style="width:350px;float:right;" v-model="searchKey">
                <span slot="append">
                    <i :size="16" class="el-icon-search" @click="searchProjectList"></i>
                </span>
            </el-input>
            </div>
            <projectList :projectList="projectList"/>
            <el-pagination
                class="pager"
                background
                layout="prev, pager, next"
                :hide-on-single-page="true"
                :page-size="30"
                :total="allProjectList.length">
                </el-pagination>
</div>    
</template>
<script>
import projectList from "@/components/projectList.vue"
export default {
    layout:"default",
    components:{
        projectList
    },
    data: () => ({
      searchKey:"",
      allProjectList:[{
          id:1,
          img:"../static/book.png",
          name:"第一个项目",
          desc:"不完美的她"
      },{
          id:1,
          img:"../static/1.png",
          name:"第二个项目",
          desc:"不完美的她"
      },{
          id:1,
          img:"../static/3.png",
          name:"第三个项目",
          desc:"不完美的她"
      },{
          id:1,
          img:"../static/5.png",
          name:"第四个项目",
          desc:"不完美的她"
      }],
      projectList:[],
      teamList:[],
      eventList:[],
    }),
    created:function(){
        this.projectList=this.allProjectList;
    },
    methods:{
        searchProjectList:function(){
            this.projectList=this.allProjectList.filter(a=>a.name.indexOf(this.searchKey)>-1);
        }
    }
}
</script>
<style lang="scss">


</style>